$class-prefix-timeline: rt-timeline;

.#{$class-prefix-timeline} {

  --font-size: var(--timeline-item-font-size, var(--rt-size-14));
  --content-color: var(--timeline-item-content-color, var(--rt-color-text));
  --pending-font-size: var(--timeline-item-pending-font-size, var(--rt-size-16));
  --padding-bottom: var(--timeline-item-padding-bottom, 20px);
  --line-width: var(--timeline-item-line-width, 2px);
  --line-color: var(--timeline-item-line-color, rgba(0, 0, 0, .06));
  --dot-border-width: var(--timeline-item-dot-border-width, 2px);


  &-item {
    position: relative;
    margin: 0;
    padding-bottom: var(--padding-bottom);
    box-sizing: content-box;
    font-size: var(--font-size);
    list-style: none;

    &-head {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border: var(--dot-border-width) solid transparent;
      border-radius: 100px;

      &-blue {
        color: var(--rt-color-primary);
        border-color: var(--rt-color-primary);
      }

      &-red {
        color: var(--rt-color-danger);
        border-color: var(--rt-color-danger);
      }

      &-green {
        color: var(--rt-color-success);
        border-color: var(--rt-color-success);
      }

      &-gray {
        color: var(--rt-color-wathet);
        border-color: var(--rt-color-wathet);
      }

      &-custom {
        position: absolute;
        top: 6px;
        left: 5px;
        width: auto;
        height: auto;
        margin-top: 0;
        line-height: 1;
        text-align: center;
        border: 0;
        border-radius: 0;
        transform: translate(-50%, -50%);
      }
    }

    &-tail {
      position: absolute;
      top: 16px;
      left: 4px;
      height: calc(100% - 26px);
      border-left: var(--line-width) solid var(--line-color);
    }

    &-pending &-head {
      font-size: var(--pending-font-size);
      background-color: transparent;
    }

    &-pending &-tail {
      display: none;
    }

    &-content {
      position: relative;
      top: calc((var(--font-size) * 1.2 - var(--font-size) + 1px) * -1);
      margin: 0 0 0 26px;
      word-break: break-word;
      color: var(--content-color);
      line-height: 1.4;
    }

    &.#{$class-prefix-timeline}-item-last {
      > .#{$class-prefix-timeline}-item-tail {
        display: none;
      }

      > .#{$class-prefix-timeline}-item-content {
        min-height: 38px;
      }
    }
  }

  &.#{$class-prefix-timeline}-alternate,
  &.#{$class-prefix-timeline}-right,
  &.#{$class-prefix-timeline}-label {
    .#{$class-prefix-timeline}-item {
      &-tail,
      &-head,
      &-head-custom {
        left: 50%;
      }

      &-head {
        margin-left: -4px;

        &-custom {
          margin-left: 1px;
        }
      }

      &-left {
        .#{$class-prefix-timeline}-item-content {
          left: calc(50% - 4px);
          width: calc(50% - 18px);
          text-align: left;
        }
      }

      &-right {
        .#{$class-prefix-timeline}-item-content {
          width: calc(50% - 20px);
          margin: 0;
          text-align: right;
        }
      }
    }
  }

  &.#{$class-prefix-timeline}-right {
    .#{$class-prefix-timeline}-item-right {
      .#{$class-prefix-timeline}-item-tail,
      .#{$class-prefix-timeline}-item-head,
      .#{$class-prefix-timeline}-item-head-custom {
        left: calc(100% - 4px - var(--line-width));
      }
      .#{$class-prefix-timeline}-item-content {
        width: calc(100% - 26px);
      }
    }
  }

  &-pending &-item-last &-item-tail {
    display: block;
    height: calc(100% - 26px);
    border-left: 2px dotted var(--line-color);
  }

  &-reverse &-item-last &-item-tail {
    display: none;
  }

  &-reverse &-item-pending {
    .#{$class-prefix-timeline}-item-tail {
      display: block;
      height: calc(100% - 38px);
      border-left: 2px dotted var(--line-color);
    }
    .#{$class-prefix-timeline}-item-content {
      min-height: 38px;
    }
  }

  &.#{$class-prefix-timeline}-label {
    .#{$class-prefix-timeline}-item-label {
      position: absolute;
      top: calc((var(--font-size) * 1.2 - var(--font-size) + 1px) * -1);
      width: calc(50% - 20px);
      text-align: right;
      line-height: 1.4;
    }
    .#{$class-prefix-timeline}-item-right {
      .#{$class-prefix-timeline}-item-label {
        left: calc(50% + 20px);
        width: calc(50% - 18px);
        text-align: left;
      }
    }
  }
}
